import React, { Component } from 'react'
import axios from 'axios'
// import { history } from "react-router-dom";
import { Form,Button,Input } from 'semantic-ui-react'
import 'semantic-ui-css/semantic.min.css'
import './index.css'




export default class Login extends Component {
  constructor(props) {
      super(props)
      this.state = {
        username: '',
        pwd: ''
      }
  }  
//   可以写一个方法，用户名和密码公用
  handleChange = (event) => {
      const {name,value} = event.target;
      this.setState({
          [name]:value
      })
  }
  handleUsername = (event) => {
    this.setState({
        username: event.target.value
    })
  }
  handlePwd = (event) => {
      this.setState({
          pwd: event.target.value
      })
  }
  handleSubmit = () => {
      const {history} = this.props;
      // tom 123
      console.log(this.state.username,this.state.pwd)
      axios.post('users/login',{
          uname: this.state.username,
          pwd: this.state.pwd
      }).then(data => {
          console.log(data.data)
          if (data.meta.status === 200) {
              localStorage.setItem('mytoken',data.data.token);
              history.push('/home')
          }
      })
  }
  render() {
    const {username, pwd} = this.state;
    return (
      <div className="login-container">
        <div className="login-title">登陆</div>

        <div className="login-form">
            <div>
                用户名：
                <input value={this.state.username} onChange={this.handleUsername} type="text" name="username" />
            </div>
            <div>
                密码：<input value={this.state.pwd} onChange={this.handlePwd} type="password" name="pwd" />
            </div>
        </div>
        <Button primary onClick={this.handleSubmit}>登陆</Button>
      </div>
    )
  }
}
